<template>
  <div class="_wz_cent_main" style="background: rgb(112 120 65);">

    <Table :columns="columns14" :data="data5" border :span-method="handleSpan"></Table>
  </div>
</template>
<script>


import { mapState, mapActions } from "vuex";

export default {
  components: {},
  props: [],//接收来自父组件的数据
  data() {
    return {
      columns14: [
        {
          title: "ID",
          key: "id"
        },
        {
          title: "Date",
          key: "date"
        },
      ],
      data5: [
        { id: 1, name: "John Brown", age: 18, address: "New York No. 1 Lake Park", date: "2016-10-03" },
        { id: 1, name: "Jim Green", age: 24, address: "London No. 1 Lake Park", date: "2016-10-01" },
        { id: 1, name: "Jim Green", age: 24, address: "London No. 1 Lake Park", date: "2016-10-01" },
        { id: 1, name: "Jim Green", age: 24, address: "London No. 1 Lake Park", date: "2016-10-01" },
        { id: 1, name: "Jim Green", age: 24, address: "London No. 1 Lake Park", date: "2016-10-01" },
        { id: 2, name: "Joe Black", age: 30, address: "Sydney No. 1 Lake Park", date: "2016-10-02" },
        { id: 2, name: "Joe Black", age: 30, address: "Sydney No. 1 Lake Park", date: "2016-10-02" },
        { id: 2, name: "Joe Black", age: 30, address: "Sydney No. 1 Lake Park", date: "2016-10-02" },
        { id: 3, name: "Jon Snow", age: 26, address: "Ottawa No. 2 Lake Park", date: "2016-10-04" },
        { id: 3, name: "Jon 1Snow", age: 16, address: "Ottawa No. 2 Lake Park", date: "2016-10-04" },
        { id: 3, name: "Jon 1Snow", age: 16, address: "Ottawa No. 2 Lake Park", date: "2016-10-04" },
        { id: 3, name: "Jon 1Snow", age: 16, address: "Ottawa No. 2 Lake Park", date: "2016-10-04" },
        { id: 3, name: "Jon 1Snow", age: 16, address: "Ottawa No. 2 Lake Park", date: "2016-10-04" }
      ],

    };
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态


  },
  methods: {//执行的方法
    handleSpan({ row, column, rowIndex, columnIndex }) {
      let that = this;
      if(columnIndex == 0){//判断第几行

        if(rowIndex > 0 && row.id == that.data5[rowIndex - 1].id){
          return{
            rowspan:0,
            colspan:0
          }
        }else{
          for (let i = rowIndex; i < that.data5.length; i++) {

            if (that.data5[i].id != row.id) {
              return {
                rowspan: i - rowIndex,
                colspan: 1
              };
            }
            if((i + 1) == that.data5.length){
              console.log(i,rowIndex)
              return {
                rowspan: i - rowIndex + 1,
                colspan: 1
              };
            }
          }
        }
      }



      // if (rowIndex > 0) {
      //   if (row.id == this.data5[rowIndex - 1]&&columnIndex==0){
      //     return{
      //       rowspan:0,
      //       colspan:0
      //     }
      //   }
      // }
      // for (let i = this.crow; i < this.data5.length; i++) {
      //   if (this.data5[i].id != row.id && columnIndex == 0) {
      //     this.crow = i;
      //     let returnCount = this.rowSpanCount;
      //     this.rowSpanCount = 0;
      //     debugger
      //     console.log(555555);
      //     return {
      //       rowspan: returnCount,
      //       colspan: 1
      //     };
      //     break;
      //   }
      //   this.rowSpanCount++;
      // }


    }

  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
};
</script>
<style lang="less">

</style>
